<template>
	<view>
		<u-navbar title="订单详情" :border-bottom='false' back-icon-size='48'></u-navbar>
		<view class="banner">
			<view class="status">
        {{ items.status_name }}
			</view>
		</view>
		<view class="main">
			<view class="product">
				<view class="top">
					<text>{{ items.type_name }}</text>
					<text style="color: #FF4600;">{{ items.status_name }}</text>
				</view>
				<view class="mid">
					<image class="shopimg" :src="items.icon" mode=""></image>
					<view class="tit">
						<view class="text">
              {{ items.title }}
						</view>
						<view class="tip">
							出发时间:{{ items.start_time }}
						</view>
						<view class="tip">
							套餐包含：{{ adNum }}成人
						</view>
					</view>
					<view class="num">
						x1
					</view>
				</view>
				<view class="price">
          <view class="price-sf">
            实付款<text>¥ {{ items.total_amount }}</text>
          </view>
          <view class="price-yh">
            优惠<text>¥ {{ items.welfare_fund_use }}</text>
          </view>
          <view class="price-zj">
            总价<text>¥ {{ items.order_amount }}</text>
          </view>
				</view>
			</view>

			<view class="orderInfo">
				<view class="order-li">
					<view class="lable">
						订单编号：
					</view>
					<view class="num">
						{{ items.trip_order_sn }}
					</view>
					<view class="copy" @click="copy">
						复制订单
					</view>
				</view>
				<view class="order-li">
					<view class="lable">
						创建时间：
					</view>
					<view class="num">
            {{ items.create_time }}
					</view>
				</view>
				<view class="order-li">
					<view class="lable">
						付款时间：
					</view>
					<view class="num">
            {{ items.pay_time }}
					</view>

				</view>
				<view class="order-li">
					<view class="lable">
						出发时间：
					</view>
					<view class="num">
            {{ items.start_time }}
					</view>
				</view>
			</view>

			<view class="btn">
				删除订单
			</view>
		</view>
	</view>
</template>

<script>
  import myRequest from '@/api/order.js'
	export default {
		data() {
			return {
			  id:0,
        items:{},
        adNum:0,
        cliNum:0
      }
		},
    onLoad(options){
		  this.id = options.id
      this.getDetails()
    },
    methods:{
      async getDetails() {
        let result = await myRequest.getDetailsOrder({order_id:this.id})
        if(result.status){
          this.items = result.data
          this.items.total_amount = Number(this.items.total_amount)
          this.items.order_amount = Number(this.items.order_amount)
          this.items.welfare_fund_use = Number(this.items.welfare_fund_use)
          this.items.people.forEach(item=>{
            this.adNum++
          })
        }
      },
      copy(){
        const data = this.items.trip_order_sn
        uni.setClipboardData({
          data:data,
          success:function(){
            uni.showToast({
                            title: '复制成功',
                            duration: 2000,
                            icon: 'none'
                          });
          },
          fail:function(err){
            uni.showToast({
                            title: '复制失败',
                            duration: 2000,
                            icon: 'none'
                          });
          }

                             })
      }
    }
	}
</script>

<style lang="scss" scoped>
	.banner {
		width: 100%;
		height: 280rpx;
		@include bgi('../../../../static/imgs/ddxqbgi.png');
		padding-top: 60rpx;
		padding-left: 48rpx;

		.status {
			font-size: 36rpx;
			font-family: Segoe UI;
			font-weight: 400;
			color: #FFFFFF;
		}
	}

	.main {
		padding: 0 28rpx;
		margin-top: -144rpx;

		.product {
			width: 100%;
			height: 344rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-top: 32rpx;

			.top {
				height: 88rpx;
				padding: 0 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
				font-family: Arial;
				font-weight: 400;
				color: #333333;
			}

			.mid {
				display: flex;
				padding: 0 20rpx;

				.shopimg {
					width: 160rpx;
					height: 160rpx;
				}

				.tit {
					margin-left: 24rpx;
					width: 60%;
					font-size: 30rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #333333;

					.text {
						font-size: 30rpx;
						font-family: Segoe UI;
						font-weight: 400;
						color: #333333;
					}

					.tip {
						padding: 4rpx 0;
						font-size: 24rpx;
						font-family: Arial;
						font-weight: 400;
						color: #999999;
					}
				}

				.num {
					margin-left: auto;
					font-size: 28rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #333333;
				}
			}

			.price {
				font-size: 24rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #666666;
        justify-content:flex-end;
        align-items:center;
        view{
          padding: 22rpx 20rpx 22rpx 0;
          text-align: right;
          float:right;
        }
        .price-sf{}
        .price-zj{
          text{
            color: #666666;
          }
        }
        .price-yh{
          color: #FF4600;
          text{
            color: #FF4600;
          }
        }
				view>text {
					font-size: 32rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #333333;
					margin-left: 6rpx;
				}
			}
		}

		.orderInfo {
			margin-top: 32rpx;
			width: 694rpx;
			height: 266rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 10rpx 20rpx;
			display: flex;
			flex-direction: column;

			.order-li {
				flex: 1;
				display: flex;
				align-items: center;

				.lable {
					font-size: 28rpx;
					font-family: PingFangSC-Light;
					color: #999999;
				}

				.num {
					font-size: 28rpx;
					font-family: PingFangSC-Light;
					color: #120404;
				}

				.copy {
					margin-left: auto;
					width: 112rpx;
					height: 40rpx;
					border: 2rpx solid #2D7AFE;
					border-radius: 8rpx;
					font-size: 24rpx;
					font-family: Arial;
					font-weight: 400;
					color: #2D7AFE;
					text-align: center;
					line-height: 40rpx;
				}
			}
		}

		.btn {
			margin-top: 92rpx;
			width: 694rpx;
			height: 100rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			text-align: center;
			font-size: 28rpx;
			font-family: Segoe UI;
			font-weight: 400;
			line-height: 100rpx;
			color: #FF4141;
		}

		.btns {
			margin-top: 32rpx;
			width: 694rpx;
			height: 100rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.btnitemPay {
				width: 176rpx;
				height: 60rpx;
				border: 1px solid #FF7C0A;
				color: #FF7C0A;
				border-radius: 40rpx;
				text-align: center;
				line-height: 60rpx;
			}
		}
	}
</style>
